<script setup lang="ts">
import {closeToast, showFailToast, showImagePreview, showLoadingToast, showNotify} from "vant";
import {onMounted, reactive, ref, toRefs} from "vue";
import {useRouter} from "vue-router";
import {userCurrent} from "@/api/UserApi";
import type {User} from "@/models/user";
import defaultAvatar from "@/assets/images/avatar.gif";

const show = ref(false);
const router = useRouter();

const state = reactive({
  currentUser: {} as User,
})

const {currentUser} = {...toRefs(state)}

const getCurrentUser = async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  try {
    const res = await userCurrent();
    console.log(res.data.data)
    if (res.data.code === 40101) {
      await router.push('/user/login');
      showFailToast('请先登录！');
      return;
    }
    currentUser.value = res.data.data;
    // @ts-ignore
    return res.data;
  } catch (error) {
    closeToast()
    console.error('获取用户角色失败：', error);
  } finally {
    closeToast();
  }
};

onMounted(async () => {
  await getCurrentUser()
})

// 点击头像时显示预览
const handleAvatarClick = () => {
  showImagePreview({
    images: [currentUser.value.avatarUrl],
    closeable: true,
  });
};

const loading = ref(false);
const onRefresh = async () => {
  await getCurrentUser();
  showNotify({type: 'success', message: '刷新成功', duration: 500,});
  loading.value = false;
};

/**
 * 编辑用户信息
 * @param editKey
 * @param editLabel
 * @param currentValue
 */
const toEdit = (editKey: string, editLabel: any, currentValue: any) => {
  router.push({
    path: "/user/edit",
    query: {
      editKey: editKey,
      editLabel: editLabel,
      currentValue: currentValue
    }
  })
}


</script>

<template>
  <transition name="van-slide-right">
    <div id="user">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-cell-group>
          <van-cell :inset="true" title="账户名" to="/user/edit" is-link :value="currentUser.userAccount"
                    @click="toEdit('userAccount', '账户名', currentUser.userAccount)"/>
          <van-cell :inset="true" title="用户名" is-link to="/user/edit" :value="currentUser.username"
                    @click="toEdit('username', '用户名', currentUser.username)"/>
          <van-cell :inset="true" title="头像" to="/user/edit" is-link
                    @click="toEdit('avatarUrl', '头像', currentUser.avatarUrl)">
            <template #value>
              <van-image
                  width="30"
                  height="30"
                  :src="currentUser.avatarUrl"
                  @click.stop="handleAvatarClick"
                  class="avatar-image"
                  round
                  :error-icon="defaultAvatar"
              />
            </template>
          </van-cell>
          <van-cell :inset="true" title="性别" is-link :value="currentUser.gender === 1 ? '男' : '女' "
                    @click="toEdit('gender', '性别', currentUser.gender === 1 ? '男' : '女')"/>
          <van-cell :inset="true" title="密码" to="/user/edit" is-link :value="currentUser.userPassword || '******' "
                    @click="toEdit('userPassword', '密码', currentUser.userPassword)"/>
          <van-cell :inset="true" title="电话号" to="/user/edit" is-link :value="currentUser.phone || '去绑定' "
                    @click="toEdit('phone', '电话号', currentUser.phone)"/>
          <van-cell :inset="true" title="邮箱" to="/user/edit" is-link :value="currentUser.email || '去绑定' "
                    @click="toEdit('email', '邮箱', currentUser.email)"/>
          <van-cell :inset="true" title="角色" :value="currentUser.userRole === 1 ? '管理员' : '普通用户' "/>
          <van-cell :inset="true" title="标签" to="/user/edit" is-link :value="currentUser.tags"
                    @click="toEdit('tags', '标签', currentUser.tags)"/>
          <van-cell :inset="true" title="简介" to="/user/edit" is-link
                    :value="(currentUser.profile || '暂无简介...').length > 10 ? (currentUser.profile || '暂无简介...').slice(0, 9) + '...' : (currentUser.profile || '暂无简介...') "
                    @click="toEdit('profile', '简介', currentUser.profile)"/>
          <van-cell :inset="true" title="注册时间" :value="currentUser.createTime"/>
        </van-cell-group>
      </van-pull-refresh>
    </div>
  </transition>
</template>

<style scoped>
#user {
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
}
.avatar-image {
  border-radius: 50%;
  cursor: pointer;
}
</style>
